
<template>
  <div class="app-container shop-purchase-container">
    <div class="back-content flex-between">
      <div class="back-main flex-normal">
        <span class="back-icon el-icon-back" @click="$router.go(-1)"></span>
        <span class="back-label">订购服务套餐</span>
      </div>
    </div>
    <div class="shop-purchase-main">
      <div class="mark-content flex-column">
        <span class="mark-label">订购须知：</span>
        <span class="mark-row">集团版，集团版支持多商户，每个商户均可独立管理，有独立后台；</span>
        <span class="mark-row">账号类型为A类账户，支持定向任务，优惠活动，团购活动，定向赠送等活动的发布</span>
      </div>
      <div class="model-content flex-column" v-loading="boo.loading">
        <span class="mdoel-label">选择套餐</span>
        <div class="item flex-normal">
          <span class="item-label">版本名称</span>
          <div class="serve-list flex-normal">
            <div :class="['serve-item flex-normal', currentServe.id == item.id && 'active']" 
              v-for="item in shopTypeList" :key="item.id"
              @click="serveChange(item)">
              <span class="serve-txt">{{ item.versionName }}</span>
            </div>
          </div>
        </div>
        <div class="item flex-normal">
          <span class="item-label">订购价格</span>
          <div class="money-content flex-normal">
            <span class="money-txt">{{baseData.orderPrice}}</span>
            <span class="money-desc">元/年</span>
          </div>
        </div>
        <div class="item flex-normal">
          <span class="item-desc">
            说明：本商户包含{{baseData['shopCount'] || '0'}}个子账户，
            集团版账户：{{baseData['yearFee'] || '0'}}元/年；子账户：{{baseData['subAccountPrice'] || '0'}}元/年，
            合计{{baseData['orderPrice'] || '0'}}元；
          </span>
        </div>
      </div>
      <div class="btn-content">
        <el-button class="purshase-btn" type="primary" size="small" @click="showDialog('dialog-tx')" :loading="boo.isSubmit">立即订购</el-button>
      </div>
    </div>
    <dialog-normal
      ref="dialog-tx"
      :dialog-prop="{
        title: '支付',
        height: '400px',
        width: '800px',
        submit: '立即订购'
      }" @normal-submit="submitDialogTx">
      <template #dialog-content>
        <div class="LPay-code-container">
          <div class="flex-normal">
            <span class="Lpay-label">支付密码：</span>
            <div id="ipt_pwd4" class="flex-normal ipt-pwd-content">
              <span id="LOGPASS4_SHOW" class="placehoder-txt">请输入支付密码</span>
              <input id="LOGPASS4" class="default input_search" type="password" disabled="disabled" />
              <div id="keyboardBtn4" class="ipt_pwd_rjp default"></div>
            </div>
          </div>
        </div>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
import {LLKeyBord} from '@/utils/tools.js'
import {
  getRandom
} from "@/api/financeManage/lpay.js";
import {getOrderServe, payOrder, isSubAccount, getFee} from '@/api/home/shop-purchase.js'

export default {
  beforeRouteEnter (to, from, next){
    isSubAccount().then(res => {
      if(res.data){
        next('/index')
      }else{
        next()
      }
    })
  },
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
  },
  data() {
    return {
      boo: {
        loading: false,
        isSubmit: false
      },
      LPayProp: {
        options: {},
        passwordInstance: null,
        pwdError: false,
      },
      shopTypeList: [],
      currentServe: {},
      baseData: {},
    };
  },
  async mounted(){
    let _self = this
    _self.getOrderServe()
  },
  methods: {
    async getRandom(){
      let _self = this, isSuccess = false
      await getRandom().then(res => {
        _self.LPayProp.options = res.data
        isSuccess = true
      })
    },
    showDialog(ref){
      let _self = this
      let {id} = _self.currentServe
      if(!id) return _self.$message.error('请选择一个版本')
      _self.$nextTick(async () => {
        await _self.getRandom()
        _self.$refs[ref].showDialog = true
        setTimeout(() => {
          let paramsPwdTx = {
            click_objId: '#keyboardBtn4', 
            Input_texId: '#LOGPASS4',
            parent_objId: '#ipt_pwd4',
            placeholderId: '#LOGPASS4_SHOW'
          }
          const passowrdTx = LLKeyBord(paramsPwdTx, _self.LPayProp.options)          
          passowrdTx.initOptions()
          _self.LPayProp.passwordInstance = passowrdTx
        }) 
      })
    },
    submitDialogTx(){
      let _self = this
      let {passwordInstance, money} = _self.LPayProp
      let {id} = _self.currentServe
      let vm = _self.$refs['dialog-tx']
      // 获取国密密文
      passwordInstance.setRandKey(_self.LPayProp.options.random_value) // 先设置随机key
      const password = passwordInstance.getOutputSM() // 国密加密密码

      const hash = passwordInstance.getHash() // RSA加密密码
      if(!hash || hash == '') {
        vm.loading = false
        return _self.$message.error('原密码不能为空')
      }
      
      let props = {
        password: password,
        random_key: _self.LPayProp.options['random_key'],
        shopTypeId: id
      }
      payOrder(props).then(res => {
        vm.showDialog = false
        _self.$message.success('操作成功')
        _self.$router.replace({name: 'FinanceStore'})
      }).catch(err => {
        _self.getRandom()
      }).finally(() => {
        vm.loading = false
      })
    },
    serveChange(item){
      let _self = this
      _self.currentServe = item
      _self.computedFee()
    },
    async getOrderServe(){
      let _self = this, isSuccess = false
      await getOrderServe().then(res => {
        let { shopTypeList = [], shopCount = 0 } = res.data
        _self.shopTypeList = shopTypeList
        _self.currentServe = shopTypeList[0] || {}
        _self.$set(_self.baseData, 'shopCount', shopCount)
        _self.computedFee()
      })
      return isSuccess
    },
    async computedFee(){
      let _self = this
      if(!_self.currentServe['id']) return
      _self.boo.loading = true
      await getFee(_self.currentServe['id']).then(res => {
        _self.baseData = {..._self.baseData, ...res.data}
      })
      _self.boo.loading = false
    },
  }
};
</script>
<style scoped lang="scss">
.back-content{
  padding: vh(25) vw(20) vh(25) 0;
  .back-icon{
    font-size: vh(36);
    cursor: pointer;
  }
  .back-label{
    margin-left: vw(20);
    font-size: vh(13);
    color: #3D3D3D;
  }
}
.shop-purchase-container{
  padding: 0 30px;
  .mark-content{
    background: rgba(18, 150, 219, 0.08);
    padding: 30px 30px 60px;
    .mark-label, .mark-row{
      color: #3D3D3D;
      font-size: 13px;
      line-height: 34px;
    }
  }
  .model-content{
    margin-top: 24px;
    .mdoel-label{
      color: #444444;
      font-size: 20px;
      font-weight: 800;
      padding-bottom: 25px;
    }
    .item{
      margin-bottom: 40px;
      .item-label{
        font-size: 13px;
        color: #666666;
        width: 160px;
      }
      .item-desc{
        color: #3D3D3D;
        font-size: 13px;
      }
    }
    .serve-list{
      .serve-item{
        font-size: 13px;
        color: #3D3D3D;
        margin-right: 40px;
        background: rgba(237, 237, 237, 0.4);
        border-radius: 3px;
        border: 1px solid #DDDDDD;
        transition: .3s;
        height: 42px;
        padding: 0 32px;
        cursor: pointer;
        &.active{
          border: 1px solid #0003AA;
          background: rgba(26, 148, 255, 0.0784);
        }
      }
    }
    .money-content{
      .money-txt{
        color: #0003AA;
        font-size: 24px;
        font-weight: 500;
      }
      .money-desc{
        font-size: 13px;
        color: #666666;
        margin-left: 6px;
      }
    }

  }
  .btn-content{
    margin-left: 164px;
    padding-bottom: 100px;
    .purshase-btn{
      width: 328px;
    }
  }
}
.LPay-code-container {
  .ipt-pwd-content{
    height: 60px;
    position: relative;
    width: 60%;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 10px;
    .placehoder-txt{
      color: #999;
      font-size: 13px;
    }
  }
  .Lpay-label{
    font-size: 13px;
    width: 120px;
  }

}
</style>